<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS3动画</title>
		<style>
		div{width: 100px;height: 100px;background: red;position: relative;
		animation: mymove 5s;color: white;-moz-animation: mymove 5s infinite;
		-webkit-animation: mymove 5s infinite;
		-o-animation: mymove 5s infinite;
		}
		@keyframes mymove{
			from,0%{left: 0px;background: red;top: 0px;}
			50%{left: 0px;background:green;top: 100px;}
			75%{left: 200px;background: orange;top: 200px;}
			to,100%{left: 200px;background: blue;top: 0px;}
		}
		
		
		</style>
	</head>
	<body>
		<h3>CSS3动画-沿矩形对角线运动</h3><hr>
		<div>我在运动！</div>
	</body>
</html>
